<template>
  <div class="warp-main">
    <div class="doc_left">
      <span class="resource-title">资料目录</span>
      <div class="tree-container">
        <el-tree
          :props="defaultProps.value"
          ref="tree" :load="loadNode"
          lazy
          node-key="fileId"
          :expand-on-click-node="false"
          :default-expanded-keys="[1,2]"
          @node-click="handleNodeClick">
          <template #default="{ node, data }">
          <span
            style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
            <span>
              <img src="../../assets/icons/file/folder.png" style="margin-right: 2px; width: 15px; height: 15px"/>
              <span>{{data.fileName}}</span>
            </span>
          </span>
          </template>
        </el-tree>
      </div>
    </div>
    <div class="doc_right">
      <div class="doc_top">
        <el-breadcrumb separator-class="el-icon-arrow-right" style="cursor:pointer;">
          <el-breadcrumb-item @click.native="handleToHome">
            <div>
              <span class="resource-title">资料库</span>
            </div>
          </el-breadcrumb-item>
          <el-breadcrumb-item v-for="item in breadOptionData.value" :key="item.id" @click.native="handleIn(item)">{{
            item.label }}
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="doc_main">
        <div class="search-container">
          <div class="search-container-left">
            <el-button type="primary" size="small" icon="upload" @click="upload">上传
            </el-button>
            <el-button class="create-folder" size="small" icon="plus"
                       @click="createFolder">新建文件夹
            </el-button>
            <!--            <el-button v-if="currentWorkSpace == 0" class="create-folder" size="small" icon="edit">审核</el-button>-->
            <!--            <el-button v-if="currentWorkSpace == 0" class="create-folder delete" size="small" icon="delete">删除-->
            <!--            </el-button>-->
            <!--            <el-button v-if="currentWorkSpace == 0" class="create-folder" size="small" icon="share"-->
            <!--                       @click="showShareUser">分享-->
            <!--            </el-button>-->
          </div>
          <div class="search-containe-right">
            <el-input class="search-input" placeholder="搜索文件名" v-model="keywords" size="small" clearable></el-input>
            <el-button type="primary" icon="Search" size="small" @click="keywordsSearch()">搜索</el-button>
          </div>
        </div>
        <el-table
          :data="tableData.value"
          :height="650"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="30">
          </el-table-column>
          <el-table-column
            label="文件名"
            width="400"
            align="left">
            <template v-slot="scope">
              <div v-if="scope.row.fileType == 1" @dblclick="addToBreadCrumb(scope.row)" style="cursor: pointer">
                <img
                  src="../../assets/icons/file/folder.png" style="margin-right: 2px; width: 15px; height: 15px"/>
                <span style="margin-left: 10px">{{ scope.row.fileName }}</span>
              </div>
              <div v-else>
                <img src="../../assets/icons/file/other.png"
                     style="margin-right: 2px; width: 15px; height: 15px"/>
                <span style="margin-left: 10px">{{ scope.row.fileName }}</span>
              </div>
            </template>
          </el-table-column>
          <!--          <el-table-column-->
          <!--            label="审核状态"-->
          <!--            width="100"-->
          <!--            align="center">-->
          <!--            <template v-slot="scope">-->
          <!--              <el-tag v-if="scope.row.auditStatus == '0'" type="danger">未审核</el-tag>-->
          <!--              <el-tag v-if="scope.row.auditStatus == '1'" type="success">已审核</el-tag>-->
          <!--            </template>-->
          <!--          </el-table-column>-->
          <el-table-column
            label="公开"
            width="60"
            align="center">
            <template v-slot="scope">
              <el-tag v-if="scope.row.permission == '0'">私有</el-tag>
              <el-tag v-if="scope.row.permission == '1'" type="warning">公开</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="创建者"
            width="130"
            align="center">
            <template v-slot="scope">
              <span style="margin-left: 10px">{{ scope.row.createBy }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="创建时间"
            width="170"
            align="center">
            <template v-slot="scope">
              <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            min-width="315"
            align="center"
            fixed="right">
            <template v-slot="scope">
              <div class="operation-container">
                <span>
                <el-button type="primary" size="small" @click="editFile(scope.row)">
                  <el-icon color="white" class="no-inherit"><Share/></el-icon>
                  <span class="ml6">编辑</span>
                </el-button>
              </span>
                <div
                  v-if="(!scope.row.mappingId || (breadOptionData.value  && breadOptionData.value[0].permission == '1'))">
                  <el-popconfirm
                    title="确定删除该记录？"
                    confirm-button-text="确认"
                    cancel-button-text="取消"
                    confirmButtonType="danger"
                    @confirm="deleteFile(scope.row)"
                  >
                    <template #reference>
                      <el-button type="danger" size="small">
                        <SvgIcon :size="10" iconClass="trash"></SvgIcon>
                        <span class="ml6">删除</span>
                      </el-button>
                    </template>
                  </el-popconfirm>
                </div>
                <div>
                  <el-button type="primary" size="small" @click="showShareUser(scope.row)">
                    <el-icon color="white" class="no-inherit">
                      <Share/>
                    </el-icon>
                    <span class="ml6">分享</span>
                  </el-button>
                </div>
                <div>
                  <div
                    v-if="scope.row.mappingId && (breadOptionData.value  && breadOptionData.value[0].permission == '0')">
                    <el-button type="warning" size="small" @click="cancelLink(scope.row)">
                      <el-icon color="white" class="no-inherit">
                        <Link/>
                      </el-icon>
                      <span class="ml6">取消映射</span>
                    </el-button>
                  </div>
                  <div v-else>
                    <el-button type="warning" size="small" @click="showLink(scope.row)">
                      <el-icon color="white" class="no-inherit">
                        <Link/>
                      </el-icon>
                      <span class="ml6">映射</span>
                    </el-button>
                  </div>
                </div>
                <div v-if="scope.row.fileType == 0">
                  <el-button type="primary" size="small" @click="copyLink(scope.row)">
                    <el-icon color="white" class="no-inherit">
                      <CopyDocument/>
                    </el-icon>
                    <span class="ml6">复制链接</span>
                  </el-button>
                </div>
                <!--                <span>-->
                <!--                <el-dropdown :hide-on-click="false" @command="moreOperation">-->
                <!--                  <el-button type="warning" size="small">-->
                <!--                    <SvgIcon :size="10" iconClass="table"></SvgIcon>-->
                <!--                    <span class="ml6">更多</span>-->
                <!--                  </el-button>-->
                <!--                  <template #dropdown>-->
                <!--                    <el-dropdown-menu>-->
                <!--                      <el-dropdown-item :command="{'type': 0, data: scope.row}">下载</el-dropdown-item>-->
                <!--                      <el-dropdown-item :command="{'type': 1, data: scope.row}">复制连接</el-dropdown-item>-->
                <!--                    </el-dropdown-menu>-->
                <!--                  </template>-->
                <!--                </el-dropdown>-->
                <!--              </span>-->
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-dialog
      title="上传文件"
      v-model="uploadDialogVisible"
      width="500px">
      <el-upload
        ref="uploadRef"
        :headers="authorizeHeader.value"
        :close-on-click-modal="false"
        class="upload-demo"
        show-file-list
        drag
        :action="httpOrigin + '/prod-api/file/upload'"
        multiple
        :on-success="handleSuccess">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
      <div class="dialog-footer">
        <span slot="footer">
          <el-button @click="uploadCancel">取 消</el-button>
          <el-button type="primary" @click="uploadConfirm">确 定</el-button>
      </span>
      </div>
    </el-dialog>
    <el-dialog
      :title="folderDialogTitle"
      v-model="createFolderDialogVisible"
      :close-on-click-modal="false"
      width="500px">
      <!--      <div class="permision-container">-->
      <!--        <el-radio v-model="permision" label="0">私有</el-radio>-->
      <!--        <el-radio v-model="permision" label="1">公开</el-radio>-->
      <!--      </div>-->
      <!--      <div class="permision-container">-->
      <!--        <el-radio v-model="auditStatus" label="0">未审核</el-radio>-->
      <!--        <el-radio v-model="auditStatus" label="1">已审核</el-radio>-->
      <!--      </div>-->
      <el-form-item>
        <span>名称</span>
        <el-input v-model="folderName" placeholder="请输入文件夹名称" clearable></el-input>
      </el-form-item>

      <el-form-item>
        <span>MD5</span>
        <el-input v-model="folderMd5" placeholder="请输入文件MD5" clearable></el-input>
      </el-form-item>

      <div class="dialog-footer">
        <span slot="footer">
          <el-button @click="createFolderCancel">取 消</el-button>
          <el-button type="primary" @click="createFolderConfirm">确 定</el-button>
      </span>
      </div>
    </el-dialog>
    <el-dialog
      title="映射文件目录"
      v-model="linkFileDialogVisible"
      width="500px">
      <span class="resource-title">资料目录</span>
      <el-tree
        :props="defaultProps.value"
        ref="tree" :load="loadNode"
        lazy
        node-key="fileId"
        :expand-on-click-node="false"
        :default-expanded-keys="[1,2]"
        @node-click="selectFileParentIdMapping"
        @close="closeFileParentIdMappingDialog">
        <template #default="{ node, data }">
          <span
            style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
            <span>
              <img src="../../assets/icons/file/folder.png" style="margin-right: 2px; width: 15px; height: 15px"/>
              <span>{{data.fileName}}</span>
            </span>
          </span>
        </template>
      </el-tree>
      <div class="dialog-footer">
        <span slot="footer">
          <el-button @click="closeFileParentIdMappingDialog">取 消</el-button>
          <el-button type="primary" @click="saveFileParentIdMapping">确 定</el-button>
      </span>
      </div>
    </el-dialog>
    <UserDialog
      v-model="userDialogVisible"
      :fileValue="currentSelectShareFile"
      @saveSuccess="shareFile"
    ></UserDialog>
  </div>
</template>
<script setup>
  import {reactive, ref, onMounted} from "vue"
  import {getToken} from '@/utils/auth'
  import {
    fileList,
    insert,
    updateFile,
    del,
    insertBatch,
    filePermissionList,
    insertFilePermission,
    insertFilePermissionBatch,
    download,
    sharedList
  } from "@/api/file/file";

  import {
    fileParentIdMappingList,
    getFileParentIdMapping,
    insertFileParentIdMapping,
    updateFileParentIdMapping,
    delFileParentIdMapping
  } from "@/api/file/file-parent-id-mapping";

  import {Edit, Share, Delete, Search, Upload} from '@element-plus/icons-vue'
  import to from "@/utils/to";
  import UserDialog from './components/UserDialog.vue'
  import {ElNotification} from "element-plus";
  import {encrypt, decrypt} from '../../utils/crypto-js'
  import SparkMD5 from 'spark-md5';

  const {proxy} = getCurrentInstance()
  const {sys_normal_disable, sys_user_sex} = proxy.useDict(
    'sys_normal_disable'
  )
  const showTree = ref(false)
  const tree = reactive([])
  const defaultProps = reactive({})
  const breadOptionData = reactive([])
  const keywords = ref("")
  const pageNum = ref(1)
  const pageSize = ref(10000)
  const tableData = reactive([])
  const currentNodeData = ref({})
  const currentNode = ref({})
  const uploadDialogVisible = ref(false)
  const createFolderDialogVisible = ref(false)
  const uploadFileList = ref([])
  const authorizeHeader = reactive({})
  const uploadRef = ref(null)
  const folderName = ref("")
  const folderMd5 = ref("")
  const permision = ref("0")
  const auditStatus = ref("0")
  const userDialogVisible = ref(false)
  const linkFileDialogVisible = ref(false)
  const currentLinkFileDate = ref(null)
  const currentSelectFileParentIdMappingData = ref(null)
  const currentSelectShareFile = ref({})
  const currentWorkSpace = ref(0)
  const folderDialogTitle = ref("新建文件夹")
  const currentEditFile = ref(null)
  const httpOrigin = ref('')

  const shareFile = async (selectedUsers) => {
    console.log('shareFile:', selectedUsers)
    console.log('currentSelectShareFile:', currentSelectShareFile)

    let fileId = currentSelectShareFile.value.fileId
    let data = []
    for (let user of selectedUsers) {
      let item = {
        fileId: fileId,
        userName: user.userName,
      }
      data.push(item)
    }
    console.log('data:', data)
    const [err, res] = await to(insertFilePermissionBatch(data))
    if (res) {
      ElNotification({
        type: 'success',
        message: '分享成功',
      })
    }
    userDialogVisible.value = false
    currentSelectShareFile.value = {}
  }
  const showShareUser = (file) => {
    userDialogVisible.value = true
    currentSelectShareFile.value = file
  }
  const showLink = (file) => {
    linkFileDialogVisible.value = true
    currentLinkFileDate.value = file
  }
  const cancelLink = async (file) => {
    let mappingId = file.mappingId
    console.log('mappingId:', mappingId)
    const [error, res] = await to(delFileParentIdMapping(mappingId))
    if (res) {
      let code = res.code
    }
  }
  const copyLink = (file) => {
    let url = file.url
    if (url) {
      url = window.location.origin + url
      //安全域下，浏览器允许调用clipboard api(如localhost,127.0.0.1)。非安全域下禁用了。
      if (navigator.clipboard && window.isSecureContext) {
        navigator.clipboard.writeText(url);
        ElNotification({
          type: 'success',
          message: '复制成功',
        })
      } else {
        let input = document.createElement('input')
        input.style.position = 'fixed'
        input.style.top = '-10000px'
        input.style.zIndex = '-999'
        document.body.appendChild(input)
        input.value = url
        input.focus()
        input.select()
        try {
          let result = document.execCommand('copy')
          document.body.removeChild(input)
          if (!result || result === 'unsuccessful') {
            ElNotification({
              type: 'error',
              message: '复制失败，请联系系统管理员！',
            })
          } else {
            ElNotification({
              type: 'success',
              message: '复制成功',
            })
          }
        } catch (e) {
          document.body.removeChild(input)
          ElNotification({
            type: 'error',
            message: '复制失败，请联系系统管理员！',
          })
        }
      }
    } else {
      ElNotification({
        type: 'error',
        message: '复制失败，请联系系统管理员！',
      })
    }
  }
  const handleSelectionChange = (multipleSelection) => {
    multipleSelection.value = multipleSelection
    console.log('handleSelectionChange:', multipleSelection)
  }
  const addToBreadCrumb = (file) => {
    //如果
    let fileId = file.fileId
    let breadOption = breadOptionData.value
    let currentData =
      {
        'label': file.fileName,
        'id': fileId,
        'parentId': file.parentId,
        'permission': file.permission
      }
    console.log('currentData:', currentData)
    breadOption.push(currentData)
    console.log('breadOption:', breadOption)
    breadOptionData.value = breadOption
    currentNodeData.value = file
    search(fileId)
    console.log('breadOptionData.value:', breadOptionData.value)

  }
  const createFolderCancel = () => {
    createFolderDialogVisible.value = false;
    folderName.value = ''
    folderMd5.value = ''
  }
  const createFolderConfirm = async () => {
    let parentId = currentNodeData.value.fileId
    let fileName = folderName.value
    let fileMd5 = folderMd5.value
    let editFile = currentEditFile.value

    let file = {}
    //判断是新增还是编辑
    if (editFile) {
      file = {
        fileId: editFile.fileId,
        fileName,
        md5: fileMd5
      }
      const [err, res] = await to(updateFile(file))
      if (res) {
        console.log('createFolderConfirm:', res)
      }
    } else {
      //fileType=1,代表文件夹
      // parentId = 1 代表根目录
      file = {
        fileType: 1,
        parentId: parentId ? parentId : 1,
        fileName
      }
      const [err, res] = await to(insert(file))
      if (res) {
        console.log('createFolderConfirm:', res)
        let fileId = res.data
        file.fileId = fileId
      }
    }
    folderName.value = ''
    createFolderDialogVisible.value = false;
    //重新查询当前目录子数据
    search(parentId)
    //判断新修改的节点是新增还是更新
    // 若是新增节点，则添到tree里
    //若是更新节点，这更新到tree里
    console.log('createFolderConfirm:', currentNode.value)
    let children = currentNode.value.childNodes.map(function (item) {
      return item.data
    })
    if (editFile) {
      children.forEach(item => {
        let fileId = item.fileId
        let editFileId = editFile.fileId
        if (fileId == editFileId) {
          item.fileName = fileName
        }
      })
    } else {
      children.unshift(file)
    }
    console.log('children:', children)
    proxy.$refs.tree.updateKeyChildren(currentNodeData.value.fileId, children)
  }
  const uploadCancel = () => {
    uploadFileList.value = []
    uploadRef.value.clearFiles()
    uploadDialogVisible.value = false;

  }
  const uploadConfirm = async () => {
    let fileList = uploadFileList.value
    console.log("fileList:", fileList)
    //先保存，后清除
    //批量保存
    if (fileList.length > 0) {
      let parentId = currentNodeData.value.fileId
      fileList.forEach(file => {
        file.parentId = parentId ? parentId : 1
      })
      const [err, res] = await to(insertBatch(fileList))
      if (res) {

      }
      //清除
      uploadFileList.value = []
      uploadRef.value.clearFiles()
      uploadDialogVisible.value = false;
      //刷新当前目录列表
      search(parentId)
    }
  }

  const handleSuccess = (response, file, fileList) => {
    console.log('handleSuccess:', response)
    let resData = response.data
    let fileReader = new FileReader()
    let Spark = new SparkMD5.ArrayBuffer()
    fileReader.readAsArrayBuffer(file.raw)
    fileReader.onload = function (e) {
      Spark.append(e.target.result)
      let md5 = Spark.end()
      resData.md5 = md5
    }
    uploadFileList.value.push(resData)
    console.log('uploadFileList.value:', uploadFileList.value)
  }
  const createFolder = () => {
    folderName.value = ''
    currentEditFile.value = null
    createFolderDialogVisible.value = true
  }
  const upload = () => {
    uploadFileList.value = []
    uploadDialogVisible.value = true
    console.log("Upload:", uploadDialogVisible)
  }

  const loadNode = (node, resolve) => {
    //如果展开第一级节点，从后台加载一级节点列表
    if (node.level == 0) {
      loadRootNode(resolve);
    }
    //如果展开其他级节点，动态从后台加载下一级节点列表
    if (node.level >= 1) {
      loadChildNode(node, resolve);
    }
  }
  //加载第一级节点
  const loadRootNode = (resolve) => {
    load(null, resolve, -1)
  }
  //加载节点的子节点集合
  const loadChildNode = (node, resolve, workspace) => {
    // console.log("超过二级的", node, node.level);
    let parentId = node.key
    load(node, resolve, parentId)
  }
  const load = async (node, resolve, parentId = -1, fileType = 1) => {
    let params = {
      parentId: parentId,
      fileType: fileType,
      workspace: (breadOptionData.value  && breadOptionData.value[0].permission == '0') ? 0 : 1,
      pageNum: pageNum.value,
      pageSize: pageSize.value,
    }
    const [err, res] = await to(fileList(params))
    if (res) {
      return resolve(res.rows);
    }
  }
  const keywordsSearch = () => {
    let parentId = currentNodeData.value.fileId
    let fileName = keywords.value
    search(parentId, fileName)
  }
  const search = async (parentId, fileName) => {
    let params = {
      parentId: parentId,
      fileName,
      workspace: (breadOptionData.value  && breadOptionData.value[0].permission == '0') ? 0 : 1,
      pageNum: pageNum.value,
      pageSize: pageSize.value
    }
    const [err, res] = await to(fileList(params))
    if (res) {
      tableData.value = res.rows
    }
  }

  const handleNodeClick = (data, node) => {
    let folderId = data.fileId
    let breadOption = [];
    /*临时变量nodeData储存被点击节点的node信息，判断如果此节点有父节点，
    那么将相关信息添加到面包屑的首位，并将父节点赋值给临时节点，继续判断该节点是否有父节点*/
    let nodeData = node;
    while (nodeData.parent != null) {
      breadOption.unshift({
        'label': nodeData.data.fileName,
        'id': nodeData.data.fileId,
        'parentId': nodeData.data.parentId,
        'permission': nodeData.data.permission
      });
      nodeData = nodeData.parent;
    }
    breadOptionData.value = breadOption
    currentNodeData.value = data
    console.log('currentNodeData.value:', currentNodeData.value)
    currentNode.value = node
    console.log('public or private:', breadOptionData.value[0], (breadOptionData.value && breadOptionData.value[0].permission == '0'), breadOptionData.value)
    search(folderId)
  }
  const searchShareFile = async (fileName) => {
    let params = {
      fileName,
      pageNum: pageNum.value,
      pageSize: pageSize.value
    }
    const [err, res] = await to(filePermissionList(params))
    if (res) {
      tableData.value = res.rows
    }
  }

  const handleToHome = (folderId) => {
    let breadOption = breadOptionData.value
    for (let i = breadOption.length; i > 0; i--) {
      if (breadOption[i - 1].id != folderId) {
        breadOption.pop();
      } else {
        break;
      }
    }
    search(-1)
  }

  const handleIn = (item) => {
    let folderId = item.id
    let breadOption = breadOptionData.value
    for (let i = breadOption.length; i > 0; i--) {
      if (breadOption[i - 1].id != folderId) {
        breadOption.pop();
      } else {
        break;
      }
    }
    breadOptionData.value = breadOption
    currentNodeData.value = {
      fileId: folderId,
      fileName: item.label
    }
    search(folderId);
  }

  const selectFileParentIdMapping = (data, node) => {
    currentSelectFileParentIdMappingData.value = data
  }

  const closeFileParentIdMappingDialog = () => {
    currentSelectFileParentIdMappingData.value = null
    linkFileDialogVisible.value = false
  }

  const saveFileParentIdMapping = async () => {
    console.log('currentSelectFileParentIdMappingData.value :', currentSelectFileParentIdMappingData.value)
    let params = {
      fileId: currentLinkFileDate.value.fileId,
      parentId: currentSelectFileParentIdMappingData.value.fileId
    }
    const [error, res] = await to(insertFileParentIdMapping(params))
    if (res) {
      let code = res.code
      if (code == 200) {
        closeFileParentIdMappingDialog()
      }
    }
  }

  const editFile = async (folder) => {
    console.log('editFile:', folder)
    folderDialogTitle.value = '编辑文件夹'
    folderName.value = folder.fileName
    folderMd5.value = folder.md5
    createFolderDialogVisible.value = true
    currentEditFile.value = folder
  }
  const deleteFile = async (file) => {
    let fileId = file.fileId
    console.log('deleteFile:', fileId)
    const [err, res] = await to(del(fileId))
    if (res) {
      let parentId = currentNodeData.value.fileId
      search(parentId)
    }
  }
  const downloadFile = async (file) => {
    // let fileId = file.fileId
    // let data = {
    //   fileIdStr: encrypt(fileId)
    // }
    // const [err, res] = await to(download(data))
    // if (res) {
    //   let blob = new Blob([res], {type: 'application/zip'})
    //   let url = window.URL.createObjectURL(blob)
    //   const link = document.createElement('a') // 创建a标签
    //
    //
    //   link.href = url
    //   link.click()
    //   URL.revokeObjectURL(url) // 释放内存

    let fileUrl = file.url
    let url = window.location.origin + fileUrl
    console.log('download url:', url)
    const link = document.createElement('a') // 创建a标签
    link.href = url
    link.setAttribute('download', file.fileName)
    link.click()
  }

  const handleSizeChange = () => {

  }
  const handleCurrentChange = () => {

  }

  const moreOperation = (operation) => {
    let data = operation.data
    let type = operation.type
    //下载
    if (type == 0) {
      downloadFile(data)
    } else if (type == 1) {
      console.log('复制链接')
    }
  }

  onMounted(() => {
    console.log('onMounted...window.location.origin:',)
    let origin = window.location.origin
    if (origin) {
      httpOrigin.value = origin
    }
    const options = {
      children: 'children',
      label: 'fileName'
    }
    defaultProps.value = options
    authorizeHeader.value = {
      Authorization: 'Bearer ' + getToken()
    }
    console.log('authorizeHeader:', authorizeHeader.value)
  })

  onUnmounted(() => {
    console.log('onUnmounted...')
    showTree.value = false
  })


</script>
<style scoped>
  .warp-main {
    overflow: scroll;
    margin: 10px;
    background-color: white;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
  }

  .doc_item {
    float: left;
    color: black;
    display: inline-block;
    height: 130px;
    width: 100px;
    margin-right: 30px;
    text-align: center;
    font-weight: 400;
    font-size: 14px;
  }

  .doc_item_add {
    float: left;
    color: black;
    display: inline-block;
    height: 130px;
    width: 100px;
    margin-right: 30px;
    text-align: center;
    font-weight: 400;
    font-size: 14px;
  }

  .doc_item_link {
    cursor: pointer;
  }

  .doc_item_img {
    height: 100px;
    width: 100px;
  }

  .file_item_img {
    /*position: relative;*/
    /*top: -5px;*/
    /*margin-left: 10px;*/
    /*margin-right: 10px;*/
    padding: 10px;
    height: 100px;
    width: 100px;
  }

  .doc_main {
    margin-top: 10px;
  }

  .search-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 5px;

  }

  .search-containe-right {
    display: flex;
    flex-direction: row;
    justify-content: center;
  }

  .search-input {
    margin-right: 10px;
  }

  .create-folder {
    color: dodgerblue;
    border: 1px solid dodgerblue;
  }

  .delete {
    color: #f56c6c;
    border: 1px solid #f56c6c;
  }

  .doc_right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    overflow: auto;
    width: 75%;
  }

  .el-tree > .el-tree-node {
    display: inline-block;
    min-width: 100%;
  }

  .doc_left {
    border-right: 10px solid #f4f4f4;
    width: 25%;
    height: 720px;
    padding: 10px;
    overflow: auto;
  }

  .tree-container {
    display: flex;
    overflow-x: auto;
    height: 100%;
  }

  .resource-title {
    margin-bottom: 10px;
    font-weight: bold;
  }

  .doc_top {
    float: left;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  a:visited {
    color: black;
  }

  .doc_add_img {
    height: 70px;
    width: 70px;
    margin-top: 15px;
    margin-bottom: 13px;
  }

  .home_page {
    cursor: pointer;
    vertical-align: middle;

    margin: 5px 10px;
  }

  .footer {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;

    margin-top: 20px;
  }

  .dialog-footer {
    width: 100%;
    margin-top: 30px;

    display: flex;
    flex-direction: row;
    justify-content: flex-end;
  }

  .operation-container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
  }

</style>
